<!--
  Generated template for the ChatPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-toolbar>
    <ion-title>{{"CHAT_TITLE" | translate}}</ion-title>
    <ion-buttons end>
      <button ion-button icon-only color="light" (click)="openSearch()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="{{'PULLING_TEXT'| translate}}"
      refreshingSpinner="circles"
      refreshingText="{{'REFRESHING_TEXT' | translate}}">
    </ion-refresher-content>
  </ion-refresher>

  <div [hidden]="pages.length" style="margin: 0 auto;padding-top: 10%;width: 60%;">
    <ion-note>
      还没有收藏! 快去收藏计划吧😊
    </ion-note>
  </div>

  <ion-list>
    <ion-item-sliding *ngFor="let item of pages">
      <ion-item *ngIf="item.plan" (click)="openDetail(item.plan)">
        <ion-label>{{item.plan.name}}</ion-label>
      </ion-item>
      <ion-item-options>
        <button ion-button color="danger" (click)="delete(item)">
          {{ 'DELETE_BUTTON' | translate }}
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="{{'LOADING_TEXT' | translate}}">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
